import React from 'react';
import { View, Text } from '@tarojs/components';
import ImageLoader from '../ImageLoader';
import type { CityBaseItem } from '../../types/cityBase';
import './cityBaseImage.scss';

interface CityBaseImageProps {
    cityBase: CityBaseItem;
}

/**
 * 城市基地图片展示组件
 * @param {CityBaseImageProps} props - 组件属性
 * @returns {JSX.Element} 渲染的城市基地图片展示组件
 */
export const CityBaseImage: React.FC<CityBaseImageProps> = ({ 
    cityBase
}) => {
    if (!cityBase || !cityBase.id) {
        return <></>;
    }
    return (
        <>
            {cityBase.image ? (
                <ImageLoader
                    src={cityBase.image}
                    className="object-cover"
                    mode='aspectFit'
                />
                ) : (
                 <View className='base-image-container'>
                    <View className='base-image-content'>
                        <Text className='circle-breath base-image-name text-lg'>
                            {cityBase.shortName || '训练基地'}
                        </Text>
                        <Text className='base-image-type text-sm'>{cityBase.baseType || '训练基地'}</Text>
                    </View>
                </View>
            )}
        </>
    );
};